<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./gameHomePage.css">
    <script src="./gameHomePage.js"></script>
</head>
<body>
    <div class="homePage">
        <!-- 头部 -->
        <div class="head">
            <img src="./images/gameLogo.png" alt="" >
            
            <div class="firstPage">首页</div>
            <ul >
                <li>注册</li>
                <li>登录</li>
                <li>帮助</li>
                <li>更多</li>
            </ul>

        </div>
        <!-- 主页身体 -->
        <div class="horizentalFlex">
            <!-- 主页左边游戏 -->
            <div class="games">
                <!-- 排行推荐 -->
                <div class="rank">    
                        <ul >
                            <li><a href=""><img src="./images/sub-2.gif" alt="">征战四方</a></li>
                            <li><a href=""><img src="./images/sub-3.gif" alt="">龙将</a></li>
                            <li><a href=""><img src="./images/sub-4.gif" alt="">弹弹堂</a></li>
                            <li><a href=""><img src="./images/sub-5.gif" alt="">凡人修真2</a></li>
                            <li><a href=""><img src="./images/sub-6.gif" alt="">一骑当先</a></li>
                            <li><a href=""><img src="./images/sub-7.gif" alt="">宫廷计</a></li>
                            <li><a href=""><img src="./images/sub-8.gif" alt="">神仙道</a></li>
                        </ul>
                        <div class="recommend">
                            <img src="./images/xdtgg_frxz2_44.jpg" alt="">
                            <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                            </ul>
                        </div>
                 </div>

                <!-- 游戏 -->
                <div class="category">
                    <div>
                        <span class="title"><a href="">全部游戏</a></span>
                        <ul class="gameNav">
                            <li><a href="">战争策略&emsp;|</a></li>
                            <li><a href="">体育经营&emsp;|</a></li>
                            <li><a href="">社交游戏</a></li>
                        </ul>
                    </div>

                    <ul class="game1">
                        <li style="display: flex;">
                            <img src="./images/img-4.jpg" alt="">
                            <span class="text">三国题材横版RPG网游，丰富的武将系统<br>
                                类型：角色扮演<br>
                                游戏人气：<span style="color: #a82417;">470921</span><br>
                                <div style="display: flex;">
                                   <button class="select">选服</button>
                                    <button class="inGame">进入游戏</button>
                                </div>
                                
                            </span>
                                
                            
                        </li>
                        <li style="display: flex;">
                            <img src="./images/img-5.jpg" alt="">
                            <span class="text"> 一款不建主城不等CD，不占资源，全程战斗<br>
                                类型：战征策略<br>
                                游戏人气：<span style="color: #a82417;">8745221</span><br>
                                <div style="display: flex;">   
                                    <button class="select">选服</button>
                                    <button class="inGame">进入游戏</button>  
                                </div>
                               
                            </span>
                        </li>
                    </ul>
                </div>

                <!-- 角色扮演 -->
                <div class="rolePlayGames">
                    <div class="title"><a href="">角色扮演</a></div>
                    
                    <ul class="roleArange">
                        <li class="roleGame1">
                            <div style="width: 100%;display: flex;justify-content: center;">
                                 <img src="./images/img-6.jpg" alt="">
                            </div>
                           
                            <div style="text-align: center;">
                                游戏人气：1765314<br>
                                游戏状态：<span style="color: #a82417;">22区开启</span>
                            </div>
                            
                                <div style="display: flex;justify-content: center;" >
                                       <button class="select">选服</button>
                                        <button class="inGame">进入游戏</button>
                                </div>
                        </li>
                        <li class="roleGame1">
                            <div style="width: 100%;display: flex;justify-content: center;">
                                 <img src="./images/img-7.jpg" alt="">
                            </div>
                            <div style="text-align: center;">
                                游戏人气：1765314<br>
                                游戏状态：<span style="color: #a82417;">22区开启</span>
                            </div>
                            
                                <div style="display: flex;justify-content: center;" >
                                        <button class="select">选服</button>
                                        <button class="inGame">进入游戏</button>
                                </div>
                        </li>
                        <li class="roleGame1">
                            <div style="width: 100%;display: flex;justify-content: center;">
                                 <img src="./images/img-8.jpg" alt="">
                            </div>
                            <div style="text-align: center;">
                                游戏人气：1765314<br>
                                游戏状态：<span style="color: #a82417;">22区开启</span>
                            </div>
                            
                                <div style="display: flex;justify-content: center;" >
                                        <button class="select">选服</button>
                                        <button class="inGame">进入游戏</button>
                                </div>
                        </li>
                        <li class="roleGame1">
                           <div style="width: 100%;display: flex;justify-content: center;">
                                 <img src="./images/img-9.jpg" alt="">
                            </div>
                            <div style="text-align: center;">
                                游戏人气：1765314<br>
                                游戏状态：<span style="color: #a82417;">22区开启</span>
                            </div>
                            
                                <div style="display: flex;justify-content: center;" >
                                        <button class="select">选服</button>
                                        <button class="inGame">进入游戏</button>
                                </div>
                        </li>
                        <li class="roleGame1">
                            <div style="width: 100%;display: flex;justify-content: center;">
                                 <img src="./images/img-10.jpg" alt="">
                            </div>
                            <div style="text-align: center;">
                                游戏人气：1765314<br>
                                游戏状态：<span style="color: #a82417;">22区开启</span>
                            </div>
                            
                                <div style="display: flex;justify-content: center;" >
                                        <button class="select">选服</button>
                                        <button class="inGame">进入游戏</button>
                                </div>
                        </li>
                        <li class="roleGame1">
                            <div style="width: 100%;display: flex;justify-content: center;">
                                 <img src="./images/img-11.jpg" alt="">
                            </div>
                            <div style="text-align: center;">
                                游戏人气：1765314<br>
                                游戏状态：<span style="color: #a82417;">22区开启</span>
                            </div>
                            
                                <div style="display: flex;justify-content: center;" >
                                        <button class="select">选服</button>
                                        <button class="inGame">进入游戏</button>
                                </div>
                        </li>
                        <li class="roleGame1">
                           <div style="width: 100%;display: flex;justify-content: center;">
                                 <img src="./images/img-12.jpg" alt="">
                            </div>
                            <div style="text-align: center;">
                                游戏人气：1765314<br>
                                游戏状态：<span style="color: #a82417;">22区开启</span>
                            </div>
                            
                                <div style="display: flex;justify-content: center;" >
                                        <button class="select">选服</button>
                                        <button class="inGame">进入游戏</button>
                                </div>
                        </li>
                        <li class="roleGame1">
                            <div style="width: 100%;display: flex;justify-content: center;">
                                 <img src="./images/img-13.jpg" alt="">
                            </div>
                            <div style="text-align: center;">
                                游戏人气：1765314<br>
                                游戏状态：<span style="color: #a82417;">22区开启</span>
                            </div>
                            
                                <div style="display: flex;justify-content: center;" >
                                        <button class="select">选服</button>
                                        <button class="inGame">进入游戏</button>
                                </div>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 主页右边服务 -->
            <div class="otherServices">
                <div class="login">
                    <div class="loginTitle">开心网用户登录</div>
                    <p>账号：<input type="text" name="" id="" placeholder="字母、数字的六位字符"></p>
                    <p>密码：<input type="password" placeholder="四位数字"></p>
                    <button class="butt">登录</button>
                    <div>
                        <a href="">立即注册</a>
                        <a href="">忘记密码</a>
                    </div>
                </div>

                <div class="news">
                    <div class="newsTitle"><a href="">新闻公告</a></div>
                    <ul>
                        <li><a href="">[征战四方] 开心首服·黄巾之乱</a></li>
                        <li><a href="">[龙将] 火爆8服·八门金</a></li>
                        <li><a href="">[弹弹堂] 41服开启·万人竞技</a></li>
                        <li><a href="">[凡人修真2] 03月08日·四海帝王</a></li>
                        <li><a href="">[一骑当先] 开心2服上线送黄金</a></li>
                        <li><a href="">[宫廷计] 03月06日·西施秘史</a></li>
                        <li><a href="">[凡人修真2] 03月08日·四海帝王</a></li>
                    </ul>
                </div>

                <div class="weiBo">
                    <img src="./images/ad1.jpg" alt="">
                    <img src="./images/ad2.jpg" alt="">
                </div>
                <div class="gamesViedos">
                    <div class="gameVieTitle"><a href="">游戏视频</a></div>
                    <div class="gameVieExa">
                        <img src="./images/img-1.jpg" alt="">
                        <span>《航海之王》麻辣炫酷反穿越，英雄时尚大变身！</span>
                    </div>
                    <div class="gameVieExa">
                        <img src="./images/img-2.jpg" alt="">
                        <span>《弹弹堂》吴克群同名激情主题MV，体验修真乐趣</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="topImg">
            <img src="./images/ad3.jpg" alt="">
            <div>X</div>
        </div>
        <footer>
            <div style="float: left;color: #3367bd;margin-left: 10px;">
                <a href="">关于我们</a>
                <a href="">手机版</a>
                <a href="">开放平台</a>
                <a href="">自助广告</a>
                <a href="">招聘</a>
                <a href="">客服</a>
                <a href="">帮助</a>
            </div>
            <div style="float: right;color: #787e8b;margin-right: 20px;">2017开心网文网&nbsp;&nbsp;&nbsp;文[2009]157号&nbsp;&nbsp;&nbsp;
                京ICP证080482号&nbsp;&nbsp;&nbsp;京公网安备110000000003号&nbsp;&nbsp;&nbsp;未成年人家长监护</div>
        </footer>
    </div>
</body>
</html>